<template>
<div style="height: 100%" class='contentBody'>
  <div class="">
    <el-carousel indicator-position="outside" class="swipeImg">
      <el-carousel-item v-for="item in contentData.photos" :key="item" class="scale">
        <div class="imgDiv" :style="{
              background: 'url(' + setPreviewUrl(item) + ')',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }" @click="handlePreview(item)"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <el-divider></el-divider>
  <div class="title">
    <div class="titleBtn">
      <img :src="setGroungImg()" alt="" />
      <span class="ml6">{{ contentData.groundName }}</span>
    </div>
  </div>
  <div class="detail">
    <el-timeline>
      <el-timeline-item placement="top" v-for="(item, index) in detailItems" :key="index" :icon="item.icon" :timestamp="item.title" :color="item.color">
        <div class="itemContent">{{ contentData[item.field] }}</div>
      </el-timeline-item>
    </el-timeline>
  </div>
</div>
</template>
<script>
import {
  api as viewerApi
} from 'v-viewer';
export default {
  name: "detailPage",
  data() {
    return {
      contentData: {},
      type1Icon: require("@/assets/type1.png"),
      type2Icon: require("@/assets/type2.png"),
      type3Icon: require("@/assets/type3.png"),
      type4Icon: require("@/assets/type4.png"),
      detailItems: [{
          icon: "el-icon-map-location",
          color: "#ef696b",
          title: "详细地址",
          field: "address",
        },
        {
          icon: "el-icon-phone-outline",
          color: "#ef696b",
          title: "咨询电话",
          field: "tel",
        },
        {
          icon: "el-icon-more-outline",
          color: "#ef696b",
          title: "阵地介绍",
          field: "intro",
        },
      ],
    };
  },
  created() {
    //do something after creating vue instance
    this.getData()
  },
  methods: {
    getData() {
      let me = this;
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      me.$api.getGroundDetail({
        params: {
          groundId: me.$route.query.id
        }
      }).then(res => {
        loading.close();
        me.contentData = res;
      })
    },
    setPreviewUrl(item) {
      return url.baseUrl + "admin/upms/file/download?filename=" + item;
    },
    handlePreview(item) {
      let arr = this.contentData.photos.map(x => {
        return url.baseUrl + 'admin/upms/file/download?filename=' + x + '&type=1'
      });
      const $viewer = viewerApi({
        images: arr
      })
    },
    setGroungImg() {
      let me = this;
      let imgUrl = "";
      if (me.contentData.groundType == "1") {
        imgUrl = me.type1Icon;
      } else if (me.contentData.groundType == "2") {
        imgUrl = me.type2Icon;
      } else if (me.contentData.groundType == "3") {
        imgUrl = me.type3Icon;
      } else {
        imgUrl = me.type4Icon;
      }
      return imgUrl;
    },
  },
};
</script>
<style lang="scss" scoped>
.contentBody {
    width: 56%;
    margin: auto;
    padding-top: 20px;
    .title {
        width: auto;
        text-align: center;
        .titleBtn {
            display: inline-block;
            padding: 15px 10px;
            border-radius: 5px;
            background-color: #ef696b;
            color: #fff;
        }
        img {
            display: inline-block;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
    }
}
</style>
